<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      label-width="68px"
      class="globalSerchFormStyle"
    >
      <el-row>
        <el-col :span="6">
          <el-form-item label="客户姓名" prop="blogNickName">
            <el-input
              v-model="queryParams.blogNickName"
              placeholder="请输入客户姓名"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
              style="width: 190px"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="联系电话" prop="mobilePhone">
            <el-input
              v-model="queryParams.mobilePhone"
              placeholder="请输入"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
              style="width: 190px"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <el-row class="global_el_rowStyle" :gutter="10">
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-refresh"
          size="mini"
          @click="resetQuery"
          plain
          >重置</el-button
        >
      </el-col>
    </el-row>
    <el-table :data="manageList">
      <af-table-column
        label="手机号"
        align="left"
        prop="mobilePhone"
        width="180"
      />
      <af-table-column label="会员id" align="left" prop="userId" width="120" />
      <af-table-column
        label="会员编码"
        align="left"
        prop="memberCode"
        width="180"
      />
      <af-table-column label="积分" align="left" prop="integral" width="180" />
      <af-table-column
        label="更新时间"
        align="left"
        prop="updateDate"
        width="180"
      />
      <af-table-column label="操作" align="left">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="handleAddPoint(scope.row)">
            加积分
          </el-button>
          <el-button
            size="mini"
            type="text"
            @click="handleReducePoint(scope.row)"
          >
            减积分
          </el-button>
        </template>
      </af-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <el-dialog
      title="添加积分"
      :visible.sync="openAddPoint"
      width="700px"
      append-to-body
    >
      <el-input
        v-model="addPoint"
        placeholder="请输入添加的积分"
        type="number"
        @input="validNumber"
      />
      <!-- <el-input-number style="width: 100%;" v-model="addPoint" controls-position="right" :min="1" :max="999999999999"></el-input-number> -->
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitAddPointForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="扣减积分"
      :visible.sync="openReducePoint"
      width="700px"
      append-to-body
    >
      <el-input
        v-model="reducePoint"
        placeholder="请输入要扣减的积分"
        type="number"
        @input="validReduceNumber"
      />
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitReducePointForm"
          >确 定</el-button
        >
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- <el-dialog :title="titleUseRecord" :visible.sync="openUserRecord" width="700px" append-to-body>
      <el-table  :data="useRecordList" >
        <af-table-column label="油站"  align="left" prop="stationName" />
        <af-table-column label="订单号"  align="left" prop="orderNo" />
        <af-table-column label="充值金额" align="left" prop="amt" />
        <af-table-column label="消费者昵称" width="120" align="left" prop="customerName" />
        <af-table-column label="充值时间" align="left" prop="createTime"></af-table-column>
      </el-table>
      <pagination
        v-show="totalOrder>0"
        :total="totalOrder"
        :page.sync="queryRecord.pageNum"
        :limit.sync="queryRecord.pageSize"
        @pagination="listRecordPage"
      />
    </el-dialog> -->
  </div>
</template>

<script>
import { listManage, getOrderInfo, getUseRecord } from "@/api/customer/manage";
import { stationinfo } from "@/api/station/gun";
import { listPrice } from "@/api/station/price";
import { addPoint } from "@/api/point";
import { isNumber } from "../../utils/validate";

export default {
  name: "Point_Change",
  data() {
    return {
      addPoint: "",
      reducePoint: "",
      userId: undefined,
      // 总条数
      total: 0,
      totalOrder: 0,
      // 客户管理表格数据
      manageList: [],
      orderList: [],
      useRecordList: [],
      // 是否显示弹出层
      openAddPoint: false,
      openReducePoint: false,
      openUserRecord: false,
      titleOrderInfo: "",
      titleUseRecord: "",
      oilNameOptions: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        // customerName: null,
        // commendMan: null,
        // memberGrade: null,
        // mobilePhone: null,
        // oilName: null,
        // levelId: this.levelId,
      },
      queryOrder: {
        pageNum: 1,
        pageSize: 10,
        oilName: null,
        stationId: null,
        consumerId: null,
      },
      queryRecord: {
        pageNum: 1,
        pageSize: 10,
        stationId: null,
        mobilePhone: null,
        userId: null,
        unionId: null,
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    cancel() {
      this.userId = undefined;
      this.addPoint = "";
      this.reducePoint = "";
      this.openAddPoint = false;
      this.openReducePoint = false;
    },
    //限制输入特殊字符
    validNumber(e) {
      if (e.length <= 12) {
        this.addPoint = parseInt(e);
      } else {
        this.msgError("长度不超过12");
        this.addPoint = "";
        this.reducePoint = "";
        return;
      }
    },
    validReduceNumber(e) {
      if (e.length <= 12) {
        this.reducePoint = parseInt(e);
      } else {
        this.msgError("长度不超过12");
        this.reducePoint = "";
        return;
      }
    },
    submitAddPointForm() {
      console.log(this.addPoint);

      if (this.userId && this.addPoint) {
        if (this.addPoint < 0) {
          return this.$message.error("禁止输入负数！！！");
        }
        addPoint({
          userId: this.userId,
          addPoints: parseInt(this.addPoint),
          type: 1,
        })
          .then((result) => {
            this.msgSuccess("成功");
            this.cancel();
            this.getList();
          })
          .catch((err) => {
            this.msgError(err.msg);
          });
      } else {
        return this.$message.error("积分不能为空和0！！！");
      }
    },
    submitReducePointForm() {
      if (this.userId && this.reducePoint) {
        if (this.reducePoint < 0) {
          return this.$message.error("禁止输入负数");
        }
        addPoint({
          userId: this.userId,
          addPoints: parseInt(this.reducePoint),
          type: 0,
        })
          .then((result) => {
            this.msgSuccess("成功");
            this.cancel();
            this.getList();
          })
          .catch((err) => {
            this.msgError(err.msg);
          });
      } else {
        return this.$message.error("积分不能为空和0！！！");
      }
    },
    payTypeFotmat(row, column) {
      if (row.payType === "sxf") {
        return "随行付";
      } else if (row.payType === "dzk") {
        return "电子卡";
      } else if (row.payType === "wx") {
        return "微信";
      } else if (row.payType === "zfb") {
        return "支付宝";
      } else if (row.payType === "xj") {
        return "现金";
      }
    },
    statusFotmat(row, column) {
      if (row.status === "0") {
        return "未支付";
      } else if (row.status === "1") {
        return "已支付";
      }
    },
    /** 查询客户管理列表 */
    getList() {
      // this.queryParams.levelId = this.levelId

      listManage(this.queryParams).then((response) => {
        this.manageList = response.rows;
        this.total = response.total;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    handleAddPoint(row) {
      this.userId = row.userId;
      this.openAddPoint = true;
    },
    handleReducePoint(row) {
      this.userId = row.userId;
      this.openReducePoint = true;
    },
    recordQuery(row) {
      this.queryRecord.userId = row.userId;
      this.queryRecord.mobilePhone = row.mobilePhone;
      this.queryRecord.unionId = row.unionId;
    },
  },
};
</script>
